<template>
  <page-view class="category-page">
    <page-header title="分类"></page-header>
    <div class="wrapper">
      <div class="menu-wrapper">
        <ul>
          <li
            v-for="(item, index) in menus"
            :key="index"
            :class="{ actived: actived === index }"
            @click="checkMenu(index)"
          >
            {{ item.category_name }}
          </li>
        </ul>
      </div>
      <div class="item-wrapper" ref="itemWrapper">
        <ul>
          <li v-for="(item, index) in menus" :key="index">
            <p class="category-name">{{ item.category_name }}</p>
            <food-item
              v-for="(f_item, f_index) in item.foodInfoList"
              :key="f_index"
              :f_item="f_item"
            >
              <!-- 向插槽中传东西 -->
              <img v-lazy="f_item.food_img" @load="loadImage" />
            </food-item>
          </li>
        </ul>
      </div>
    </div>
  </page-view>
</template>

<script>

import Api from "../utils/api";
import foodItem from "../components/FoodItem.vue";
import { getCurrentInstance, ref, reactive, onMounted } from "vue";
import BScroll from "better-scroll";
export default {
  name: "Category",
  components: { foodItem },
  setup() {
    const { proxy } = getCurrentInstance();
    let menus = reactive([]);
    let scroll = null;
    let onload = 0;
    let listHeight=[];
    let actived = ref(0);
    const getAllCategoryInfoList = async () => {
      let results = await Api.categoryInfo.getAllList();
      console.log(results);
      results.forEach((item) => {
        item.foodInfoList.forEach((item2) => {
          item2.food_img = proxy.BaseURL + item2.food_img;
        });
        menus.push(item);
      });
    };

    //图片计数
    function loadImage() {
      let length = 0;
      menus.forEach((item) => {
        length += item.foodInfoList.length;
      });
      onload++;
      if (onload == length) {
        getHeight();
        initScroll();
      }
    }

    function getHeight(){
      let itemList = proxy.$refs.itemWrapper.children[0].children;
      let height=0;
      for(let i=0;i<itemList.length;i++){
        height = itemList[i].offsetTop;
        listHeight.push(height)
      }
    }
    function initScroll() {
      scroll = new BScroll(proxy.$refs.itemWrapper, {
        probeType: 3,
        scrollY: true,
        //点击事件的穿透开启，默认是false
        click:true,
        //回弹动画
        bounce:true
      });
      onScroll();
    }

    //操作右边 左边自己动
    function onScroll() {
      scroll.on("scroll", (position) => {
        console.log(position);
        // 反向驱动：当我们滚动右边区域，要知道position，去定位左侧分类的
        let scrollY = Math.abs(Math.floor(position.y))
        listHeight.forEach((item)=>{

        })
      });
    }

    //操作左边  右边自己动
    function checkMenu(index) {
      scroll.off('scroll')
      actived.value = index;
      let itemList = proxy.$refs.itemWrapper.children[0].children;
      scroll.scrollToElement(itemList[index],300,)
      setTimeout(onScroll,350)
    }

    onMounted(() => {
      getAllCategoryInfoList();
    });

    return { getAllCategoryInfoList, menus, checkMenu, actived, loadImage };
  },
};
</script>

<style lang="scss" scoped>
.category-page {
  @include flexbox(column);
  .wrapper {
    flex: 1;
    margin-bottom: 60px;
    overflow: hidden;
    @include flexbox(row);
    .menu-wrapper ul li {
      width: 5rem;
      height: 3rem;
      text-align: center;
      line-height: 3rem;
      font-size: 1rem;
      background-color: lightgray;
    }
    .item-wrapper {
      flex: 1;
      overflow: hidden;
      .category-name {
        font-size: 22px;
        font-weight: bold;
        box-sizing: border-box;
        padding: 5px;
      }
    }
  }
}

.active {
  background-color: #ffffff !important;
}
</style>